import React, { Component } from 'react'
const ThemeContext = React.createContext()
const ColorContext = React.createContext()

// 创建上下文对象（ThemeContext）
// 祖先组件通过 上下文对象的 Provider 配合 value属性传值
// 如果后代组件是类组件，可以使用类的静态属性的特性（2中写法）赋值为上下文对象
//  后代组件就可以通过 this.context 获取到祖先组件的数据
// 如果后代组件是函数式组件

// 如果后代组件是函数式组件,可以通过上下对象提供的Consumer传值，
//   内部写为箭头函数，返回jsx代码，箭头函数的参数为祖先组件传递过来的值
// ？类组件能不能使用Consumer传值 ---- 必然可以

// ？如果项目中有多个 上下文传值呢？

// ？如果项目中有多个 上下文传值呢？
//  可以使用 上下文的Consumer传值，但是要注意其 嵌套问题

// 查看开发者工具

const Third = () => {
    return (
        <div>
            {/* theme为： 
     <ThemeContext.Consumer>
        {
          (val) => {
            return (
              <span>{ val}</span>
            )
          }
        }
      </ThemeContext.Consumer>
      颜色为：
      <ColorContext.Consumer>
        {
          (val) => {
            return (
              <span>{ val}</span>
            )
          }
        }
      </ColorContext.Consumer> */}

            <ThemeContext.Consumer>
                {
                    (val) => {
                        return (
                            <div>
                                <ColorContext.Consumer>
                                    {
                                        (colorval) => {
                                            return (
                                                <div>
                                                    theme: {val}
                                                    <hr />
                                                    color: {colorval}
                                                </div>
                                            )
                                        }
                                    }
                                </ColorContext.Consumer>
                            </div>
                        )
                    }
                }
            </ThemeContext.Consumer>
        </div>
    )
}
// Third.contextType = ThemeContext

class Second extends Component {
    render() {
        return (
            <div>
                <Third />
            </div>
        )
    }
}
export default class App extends Component {
    state = {
        theme: 'dark',
        color: '#f66'
    }
    render() {
        return (
            <ThemeContext.Provider value={this.state.theme}>
                <ColorContext.Provider value={this.state.color}>
                    <div>
                        <button onClick={
                            () => {
                                this.setState({
                                    theme: this.state.theme === 'dark' ? 'light' : 'dark'
                                })
                            }
                        }>
                            切换主题
                        </button>
                        <input type="color" value={this.state.color} onChange={
                            (e) => {
                                this.setState({
                                    color: e.target.value
                                })
                            }
                        } />
                        <Second theme={this.state.theme} />
                    </div>
                </ColorContext.Provider>
            </ThemeContext.Provider>
        )
    }
}